<template>
    <div>
        <!-- 使用组件 -->
        <Title :title="title"></Title>
        <!-- 提供一个容器 -->
        <div ref="left1" style="height: 300px;"></div>
    </div>
</template>
<script setup>
// 引入组件
// 引入折线图构造函数
import { Line } from '@antv/g2plot';
import Title from './Title.vue';
import moment from 'moment';
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';
// 声明标题
const title = ref('南通市崇川区实时温度曲线');
// 声明模板引用
const left1 = ref(null);
// 声明一个数组存放后端获取数据
const TempData = ref([]);
// 声明加载图标函数
const loadLine = () => {
    // const data = [
    //     { year: '1991', value: 3 },
    //     { year: '1992', value: 4 },
    //     { year: '1993', value: 3.5 },
    //     { year: '1994', value: 5 },
    //     { year: '1995', value: 4.9 },
    //     { year: '1996', value: 6 },
    //     { year: '1997', value: 7 },
    //     { year: '1998', value: 9 },
    //     { year: '1999', value: 13 },
    // ];

    const line = new Line(left1.value, {
        data: TempData.value,
        xField: 'insert_time',
        yField: 'temperature',
        label: {
            style: {
                fill: "white",
            }
        },
        // 配置x轴文本字段
        xAxis: {
            label: {
                rotate: 45,
                style: {
                    fill: "white",
                }
            }
        },
        // 配置y轴文本字段
        yAxis: {
            label: {
                style: {
                    fill: "white",
                }
            }
        },
        animation: {
            appear: {
                animation: 'wave-in',
                duration: 5000,
            },
        },
        smooth: true,
        tooltip: {
            domStyles: {
                "g2-tooltip": {
                    backgroung: '#147',
                    fontsize: '16px',
                    color: 'white'
                }
            }
        },
        point: {
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#5B8FF9',
                lineWidth: 2,
            },
        },
        //   tooltip: { showMarkers: false },
        state: {
            active: {
                style: {
                    shadowBlur: 4,
                    stroke: '#000',
                    fill: 'red',
                },
            },
        },
        interactions: [{ type: 'marker-active' }],
    });

    line.render();
}
const getData = async () => {
    let res = await get('/dashboard/pageQueryData', { page: 1, pageSize: 1000 });
    console.log(res, '查看请求结果')
    res.data.list.forEach((item, index, arr) => {
        // y轴刻度如果混乱 将第一条数据更改为小一点值
        arr[0].temperature = 15.4;
        item.insert_time=moment(item.insert_time).format('HH:mm');
    });
    let temp =[];
    res.data.list.forEach((item,index,arr)=>{
      //每隔100条采集一条
      if(index%100==0){
        temp.push(arr[index])
      }
    })
    TempData.value = temp;
}
onMounted(async () => {
    await getData();
    // 加载图标
    loadLine();
});
</script>
<style lang="less" scoped></style>